<template>
  <div>
    <!-- <h1>PersonInfoTable</h1> -->
    <table class="table" style="margin-top: 20px;">
      <tr>
        <td>姓名</td>
        <td>
          <input class="input" placeholder="请输入姓名"/>
        </td>
        <td>性别</td>
        <td>
          <input class="input" placeholder="请输入性别"/>
        </td>
        <td rowspan="4" style="text-align: center; width: 100px;">照片</td>
      </tr>
      <tr>
        <td>身份证</td>
        <td>
          <input class="input" placeholder="请输入姓名"/>
        </td>
        <td>身高</td>
        <td>
          <input class="input" placeholder="请输入性别"/>
        </td>
      </tr>
      <tr>
        <td>户口所在地</td>
        <td>
          <input class="input" placeholder="请输入姓名"/>
        </td>
        <td>民族</td>
        <td>
          <input class="input" placeholder="请输入性别"/>
        </td>
      </tr>
      <tr>
        <td>出生日期</td>
        <td>
          <input class="input" placeholder="请输入姓名"/>
        </td>
        <td>联系方式  </td>
        <td>
          <input class="input" placeholder="请输入性别"/>
        </td>
      </tr>
      <tr>
        <td colspan="5" style="text-align: center; height: 300px;">任务简介</td>
      </tr>
    </table>

  </div>
</template>
 
<script>
import { mapMutations } from 'vuex'
 
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['login']),
    login() {
      // 实际的登录逻辑，例如，发送登录请求到服务器
      this.$router.push('/index') // 登录成功后跳转到主页
    },
  },
}
</script>

<style>
.form-class {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-input {
  margin-bottom: 15px;
}

.table {
  border: solid black 1px;
  border-collapse: collapse;
}

.table td {
  border: 1px solid black;
  padding: 5px;
}

.input {
  border: 0;
}
</style>